<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>

    function start(e) {
        console.log('start', e)
        var a = document.getElementById('ball')
        a.classList.add("ball")
        a.classList.remove("paused")
        a.classList.add("active")

        var e = document.getElementById('ball')
        e.addEventListener('animationstart', (e) => {
            console.log(e);
        }, false)
        // e.addEventListener('animationend', listener, false)
        // e.addEventListener('animationiteration', listener, false)
    }

    function listener(e) {
            console.log(e);
        }

    function paused (e) {
        console.log('paused', e)
        var a = document.getElementById('ball')
        a.classList.remove("active")
        a.classList.add("paused")
    }


</script>
<body>
    <button id="btn1" onclick="start()">开始</button>
    <button id="btn1" onclick="paused()">暂停</button>
    <div class="div1">
        <svg class="svg" width="500px" height="500px">
            <path d="M50,200 q-60,50 0,100 q60,50 0,100"
                stroke-dasharray="5 5"
                style="stroke: #000000; fill: none;"
            ></path>
            <rect x="0" y="0" width="30" height="15"
                style="stroke: #ff0000; fill: none;">
                <animateMotion
                        path="M65,200 q-60,50 0,100 q60,50 0,100"
                        begin="0s" dur="10s" repeatCount="indefinite"
                        rotate="auto"
                        ></animateMotion>
            </rect>

            <path d="M10 80 Q 77.5 10, 145 80 T 280 80"
                fill="none"
                stroke="#000000"
                stroke-width="1"
                stroke-dasharray="10 5"
            ></path>
        </svg>
        <div id="ball"></div>
    </div>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .div1 {
        width: 1000px;
        height: 500px;
        position: relative;
    }
    .svg {
        display: block;
        position: absolute;
    }

    .ball {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: lightblue;

        offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');
        offset-distance: 0%;

        animation-name: run-ball;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-iteration-count: infinite;
    }

    @keyframes run-ball {
        0% {
            offset-distance: 0%;
        }

        50% {
            offset-distance: 50%;
        }

        100% {
            offset-distance: 100%;
        }
    }

    .active {
        animation-play-state: running;
    }
    .paused {
        animation-play-state: paused;
    }

</style>
</html>